<template>
  <div class="com-page">
    <div class="wrapper">
      <div class="wrapper-item left">
        <div class="item-chart top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <div class="resize">
            <i @click="changeSize('trend')" class="fa " :class="fullScreenStatus.trend ? 'fa-compress':'fa-expand'"></i>
          </div>
          <trend ref="trend"></trend>
        </div>
        <div class="item-chart bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <div class="resize">
            <i @click="changeSize('seller')" class="fa" :class="fullScreenStatus.seller ? 'fa-compress':'fa-expand'" ></i>
          </div>
          <seller ref="seller"></seller>
        </div>
      </div>
      <div class="wrapper-item medium">
        <div class="item-chart top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
           <div class="resize">
            <i @click="changeSize('map')" class="fa" :class="fullScreenStatus.map ? 'fa-compress':'fa-expand'"></i>
          </div>
          <map1 ref="map"></map1>
        </div>
        <div class="item-chart bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
           <div class="resize">
            <i @click="changeSize('rank')" class="fa" :class="fullScreenStatus.rank ? 'fa-compress':'fa-expand'"></i>
          </div>
          <rank ref="rank"></rank>
        </div>
      </div>
      <div class="wrapper-item right">
        <div class="item-chart top" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
           <div class="resize" >
            <i @click="changeSize('stock')" class="fa" :class="fullScreenStatus.stock ? 'fa-compress':'fa-expand'"></i>
          </div>
          <stock ref="stock"></stock>
        </div>
        <div class="item-chart bottom" :class="[fullScreenStatus.screen ? 'fullscreen' : '']">
           <div class="resize">
            <i @click="changeSize('screen')" class="fa" :class="fullScreenStatus.screen ? 'fa-compress':'fa-expand'"></i>
          </div>
          <screen ref="screen"></screen>
        </div>
      </div>
    </div>
    <button @click="changeThem">切换主题</button>
  </div>
</template>

<script>
import Map from "@/components/Map";
import Rank from "@/components/Rank";
import Screen from "@/components/Screen";
import Seller from "@/components/Seller";
import Stock from "@/components/Stock";
import Trend from "@/components/Trend";
export default {
  name: "ScreenViewPage",
  created() {
    this.$socket.registerCallBack('fullScreen', this.recvData)
    this.$socket.registerCallBack('themeChange', this.recvThemeChange)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('fullScreen')
    this.$socket.unRegisterCallBack('themeChange')
  },
  data(){
    return {
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        stock: false,
        screen: false,
      }
    }
  },
  components: {
    map1: Map,
    Rank,
    Screen,
    Seller,
    Stock,
    Trend
  },
  methods: {
    changeThem(){
      //TODO: 主题联动
      this.$socket.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName:'',
        value: ''
      })
    },
    recvThemeChange(){
      this.$store.commit('changeTheme')
    },
    changeSize(chartName){
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapter()
      // })
      const targetValue = !this.fullScreenStatus[chartName]
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: chartName,
        value: targetValue
      })
    },
    recvData(data){
      this.fullScreenStatus[data.chartName] = data.value
      this.$nextTick(() => {
        this.$refs[data.chartName].screenAdapter()
      })
    }
  }
}
</script>

<style scoped lang="less">
  .fullscreen{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
  }
  i {
    user-select: none;
    cursor: pointer;
  }
  .wrapper {
    display:flex;
    justify-content: center;
    height: 100%;
    background-color: #161523;
    & > div:nth-last-of-type(2){
      margin-left:2.5%;
      margin-right:2.5%;
    }
    .wrapper-item {
      height: 100%;
      width: 30%;
      display:flex;
      flex-direction: column;
      .item-chart {
        position: relative;
        border: 1px solid black;
        width: 100%;
        .resize {
          position: absolute;
          z-index: 10;
          color: #ffffff;
          right: 10px;
          top: 10px;
        }
      }
    }
    .left{
      & > div {
        margin-top: 4%;
      }
      .top {
        height: 52%;
      }
      .bottom {
        height: 40%;
      }
    }
    .medium {
      & > div {
        margin-top: 4%;
      }
      .top {
        height: 57%
      }
      .bottom {
        height: 35%;
      }
    }
    .right {
      & > div {
        margin-top: 4%;
      }
      .top {
        height: 48%;
      }
      .bottom {
        height: 48%
      }
    }
  }
  button {
    position: absolute;
    z-index: 15;
    bottom: 30px;
    right: 50%;
    transform: translateX(-50%);
  }
</style>